<template>
  <div id="regist">
    <p>Account Regist</p>
    <a-form :form="form" @submit="handleSubmit" id="form">
      <a-form-item label="username" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-input
          v-decorator="['username', { rules: [{ required: true, message: 'Please input your username!' }] }]"
        />
      </a-form-item>
      <a-form-item label="email" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-input
          style="width:67%"
          v-decorator="['email', { rules: [{type: 'email',message: 'The input is not valid E-mail!'},
              { required: true, message: 'Please input your email!' }] }]"
        />
        <a-button
          style="width:30%;margin-left:10px"
          :disabled="!!count"
          type="primary"
          @click="getCode"
        >{{ count?`-${count}s`:"Get Code" }}</a-button>
      </a-form-item>
      <a-form-item label="code" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-input
          v-decorator="['code', { rules: [{ required: true, message: 'Please input your code!' }] }]"
        />
      </a-form-item>
      <a-form-item label="password" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-input-password
          v-decorator="['password', { rules: [{ required: true, message: 'Please input your password!' }] }]"
        />
      </a-form-item>
      <a-form-item label="repassword" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-input-password
          v-decorator="['repassword', { rules: [{ required: true, message: 'Please confirm your password!' },{
                validator: compareToFirstPassword,}] }]"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 18, offset: 6 }">
        <a-button type="primary" html-type="submit" style="width: 100%;">Create</a-button>
      </a-form-item>
    </a-form>
    {{statusMsg}}
  </div>
</template>

<script>
import Crypto from "crypto-js";
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      count: null,
      statusMsg: ""
    };
  },
  methods: {
    getCode(e) {
      let _this = this;
      if (_this.count) {
        return false;
      }
      _this.form.validateFields(["username", "email"], async (err, values) => {
        if (!err) {
          console.log(values);
          let { status, data } = await this.$axios.post("/user/verify", {
            username: encodeURIComponent(values.username),
            email: values.email
          });
          if (status == 200 && data && data.code == 0) {
            _this.count = 3;
            _this.interval = setInterval(function() {
              _this.count--;
              if (_this.count == 0) {
                clearInterval(_this.interval);
                _this.count = null;
              }
            }, 1000);
          } else {
            _this.statusMsg = data.msg;
          }
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      let _this = this;
      _this.form.validateFields(async (err, values) => {
        console.log(values);
        if (!err) {
          let { status, data } = await this.$axios.post("/user/signup", {
            username: window.encodeURIComponent(values.username),
            password: Crypto.MD5(values.password).toString(),
            email: values.email,
            code: values.code
          });
          if (status == 200) {
            if (data && data.code == 0) {
              location.href = "/login";
            } else {
              _this.statusMsg = data.msg;
            }
          } else {
            _this.statusMsg = "err";
          }
          setInterval(() => {
            _this.statusMsg = "";
          }, 1500);
        }
      });
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("Two passwords that you enter is inconsistent!");
      } else {
        callback();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#regist {
  width: 500px;
  margin: 200px auto;
  p {
    font-size: 24px;
    text-align: center;
    text-indent: 80px;
  }
}
</style>